<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div style="width: 100%;text-align:center">
        <h2>表白墙</h2>
        谁&nbsp;&nbsp;&nbsp;&nbsp;<input id="username"><p></p>
        对谁&nbsp;&nbsp;:<input id="tousername"><p></p>
        说什么:<input id="msg"><p></p>
        <input type="button" value=" 提 交" onclick="mysub()">
        <div id="div_allmsg">

        </div>
    </div>
    <script>
        function mysub() {
            //1.非空校验
            var iptUsername = jQuery("#username");
            var iptToUsername = jQuery("#tousername");
            var iptMsg = jQuery("#msg");
            if(iptUsername.val().trim()=="") {
                alert("请先输入你的名字");
                iptUsername.focus();
                return;
            }
            if(iptToUsername.val().trim()=="") {
                alert("请先输入对方的名字");
                iptUsername.focus();
                return;
            }
            if(iptMsg.val().trim()=="") {
                alert("请先输入信息");
                iptUsername.focus();
                return;
            }
            
            //2.将内容展示表白墙
            jQuery("#div_allmsg").append(iptUsername.val()+"对" +iptToUsername.val()+"说:" + iptMsg.val());
            //3.清空输入内容
            iptUsername.val("");
            iptoUsername.val("");
            iptMsg.val("");
        }
    </script>
</body>
</html>